<template>
  <div class="h-full overflow-y-auto">
    <PageHeader :title="t('couponRecord.优惠券领取记录')" />
    <SearchCom
      :searchList="searchList"
      @search="toSearch"
      @reset="handleReset"
    />
    <el-table
      :data="tableData"
      style="width: 100%"
      class="cover-table"
      border
      v-loading="loading"
    >
      <el-table-column
        :prop="'couponName' + locale"
        :label="t('couponRecord.发放优惠券名称')"
      />
      <el-table-column :prop="'type'" :label="t('couponRecord.优惠券类型')">
        <template #default="scope">
          <el-tag v-if="scope.row.couponType === 1" type="success">{{
            t("couponRecord.点对点发放优惠券")
          }}</el-tag>
          <el-tag v-else-if="scope.row.couponType === 2" type="info">{{
            t("couponRecord.商品分类优惠券")
          }}</el-tag>
          <el-tag v-else-if="scope.row.couponType === 3" type="warning">{{
            t("couponRecord.新人优惠券")
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :prop="'discountMinus'"
        :label="t('couponRecord.优惠内容')"
      >
        <template #default="scope">
          满{{ scope.row.couponDiscountLimit }}{{ t("couponRecord.元") }}减{{
            scope.row.couponDiscountMinus
          }}{{ t("couponRecord.元") }}
        </template>
      </el-table-column>
      <el-table-column
        :prop="'couponUseTimeEnd' + locale"
        :label="t('couponRecord.优惠券到期时间')"
      >
        <template #default="{ row }">
          {{ moment(row.couponUseTimeEnd).format("YYYY-MM-DD HH:mm:ss") }}
        </template>
      </el-table-column>
      <el-table-column
        :prop="'vipNickName'"
        :label="t('couponRecord.领取用户昵称')"
      />
      <!-- <el-table-column :prop="'createTime'" :label="t('couponRecord.领取用户ID')" /> -->
      <el-table-column :prop="'vipPhone'" :label="t('couponRecord.手机号码')" />
      <el-table-column
        :prop="'updatedTime'"
        :label="t('couponRecord.优惠券状态')"
      >
        <template #default="{ row }">
          {{ statusMap[row.status] }}
          <!-- {{ moment(row.updatedTime).format("YYYY-MM-DD HH:mm:ss") }} -->
        </template>
      </el-table-column>
      <el-table-column :label="t('couponRecord.操作')">
        <template #default="{ row }">
          <div class="operationBtnRow">
            <el-popconfirm
              :title="t('couponRecord.确定要取消该优惠券吗')"
              @confirm="handleCancel(row)"
              :confirm-button-text="t('couponRecord.确定')"
              :cancel-button-text="t('couponRecord.取消')"
              v-if="row.status === 0"
              width="260px"
            >
              <template #reference>
                <el-button
                  class="ml0"
                  type="text"
                  size="small"
                  v-my-point="'vipCoupon:disable'"
                  >{{ t("couponRecord.取消") }}</el-button
                >
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex justify-end mt10">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import SearchCom from "@/components/searchCom.vue";
import { useTableMixin } from "@/utils/tableMixin";
import { useI18n } from "vue-i18n";
import moment from "moment";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";

const { t, locale } = useI18n();
const searchList = [
  {
    label: t("couponRecord.优惠券名称"),
    key: "couponName",
    type: "input",
  },
  {
    label: t("couponRecord.用户昵称"),
    key: "vipNickName",
    type: "input",
  },
  {
    label: t("comment.状态"),
    key: "status",
    type: "select",
    options: [
      { label: t("couponRecord.已使用"), value: 1 },
      { label: t("couponRecord.未用"), value: 0 },
      { label: t("couponRecord.过期"), value: "-1" },
      { label: t("couponRecord.停用"), value: "-2" },
    ],
  },
];
// -2停用 -1过期 0未用 1已使用
const statusMap = {
  1: t("couponRecord.已使用"),
  0: t("couponRecord.未用"),
  "-1": t("couponRecord.过期"),
  "-2": t("couponRecord.停用"),
};

const {
  currentPage,
  pageSize,
  total,
  tableData,
  loading,
  getDataList,
  handleSizeChange,
  handleCurrentChange,
  handleSearch,
  handleReset,
} = useTableMixin(Api.vipCoupon_list);

const toSearch = (params) => {
  getDataList({
    ["couponName" + locale.value]: params.couponName,
    vipNickName: params.vipNickName,
    status: params.status,
  });
};

const handleCancel = (row) => {
  Api.vipCoupon_disable(row.id).then((res) => {
    if (res.status == 200) {
      ElMessage.success(t("couponRecord.删除成功"));
      getDataList();
    }
  });
};
</script>

<style lang="scss" scoped>
.addBtn {
  height: 28px;
  margin-left: 10px;
  padding: 0 7px;
  border-radius: 3px;
  background: #fff;
  cursor: pointer;
}
</style>
